<!DOCTYPE html>
<html>
<head>
	<title>静态改动态</title>
	<style>
		
			.mo-fire {
			  width: 200px;
			  height: auto;
			  position: absolute;
			  left:50%;
			  margin-left: -100px;
			  top: 100px;
			}
			.mo-fire svg {
			  width: 100%;
			  height: auto;
			  position: relative
			}
			.flame {
			  animation-name: flamefly;
			  animation-duration: 2s;
			  animation-timing-function: linear;
			  animation-iteration-count: infinite;
			  opacity: 0;
			  transform-origin: 50% 50% 0;
			}
			.flame.one {
			  animation-delay: 1s;
			  animation-duration: 3s;
			}
			.flame3.two{
			  animation-duration: 5s;
			  animation-delay: 1s;
			}

			.flame-main {
			  animation-name: flameWobble;
			  animation-duration: 3s;
			  animation-timing-function: linear;
			  animation-iteration-count: infinite;
			}
			.flame-main.one {
			  animation-duration: 4s;
			  animation-delay: 1s;
			}
			.flame-main.two {
			  animation-duration: 3s;
			  animation-delay: 2s;
			}
			.flame-main.three {
			  animation-duration: 2.1s;
			  animation-delay: 3s;
			}
			.flame-main.four {
			  animation-duration: 3.2s;
			  animation-delay: 4s;
			}
			.flame-main.five {
			  animation-duration: 2.5s;
			  animation-delay: 5s;
			}
			@keyframes flameWobble {
			  50% {
			    transform: scale(1,1.2) translate(0, -30px) rotate(-2deg);
			  }
			}
			@keyframes flamefly {
			  0%{
			    transform: translate(0) rotate(180deg);
			  }
			   50% {
			     opacity: 1;
			  }
			  100% {
			    transform: translate(-20px, -100px) rotate(180deg);
			    opacity: 0;
			  }
	</style>
</head>

<body>
	<!-- 静态图 -->
	<div>
	  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		 width="125px" height="189.864px" viewBox="0 0 125 189.864" enable-background="new 0 0 125 189.864" xml:space="preserve">
		<path  fill="#F36E21" d="M76.553,186.09c0,0-10.178-2.976-15.325-8.226s-9.278-16.82-9.278-16.82s-0.241-6.647-4.136-18.465
			c0,0,3.357,4.969,5.103,9.938c0,0-5.305-21.086,1.712-30.418c7.017-9.333,0.571-35.654-2.25-37.534c0,0,13.07,5.64,19.875,47.54
			c6.806,41.899,16.831,45.301,6.088,53.985"/>
		<path fill="#F6891F" d="M61.693,122.257c4.117-15.4,12.097-14.487-11.589-60.872c0,0,32.016,10.223,52.601,63.123
			c20.585,52.899-19.848,61.045-19.643,61.582c0.206,0.537-19.401-0.269-14.835-18.532S57.576,137.656,61.693,122.257z"/>
		<path fill="#FFD04A" d="M81.657,79.192c0,0,11.549,24.845,3.626,40.02c-7.924,15.175-21.126,41.899-0.425,64.998
			C84.858,184.21,125.705,150.905,81.657,79.192z"/>
		<path fill="#FDBA16" d="M99.92,101.754c0,0-23.208,47.027-12.043,80.072c0,0,32.741-16.073,20.108-45.79
			C95.354,106.319,99.92,114.108,99.92,101.754z"/>
		<path fill="#F36E21" d="M103.143,105.917c0,0,8.927,30.753-1.043,46.868c-9.969,16.115-14.799,29.041-14.799,29.041
			S134.387,164.603,103.143,105.917z"/>
		<path fill="#FDBA16" d="M62.049,104.171c0,0-15.645,67.588,10.529,77.655C98.753,191.894,69.033,130.761,62.049,104.171z"/>
		<path fill="#F36E21" d="M101.011,112.926c0,0,8.973,10.519,4.556,16.543C99.37,129.735,106.752,117.406,101.011,112.926z"/>
		<path  fill="#F36E21" d="M55.592,126.854c0,0-3.819,13.29,2.699,16.945C64.038,141.48,55.907,132.263,55.592,126.854z"/>
		<path  fill="#F36E21" d="M54.918,104.595c0,0-3.959,6.109-1.24,8.949C56.93,113.256,52.228,107.329,54.918,104.595z"/>
		</svg>
	</div>
		<!-- 动态图 -->
	<div class="mo-fire">
	  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		 width="125px" height="189.864px" viewBox="0 0 125 189.864" enable-background="new 0 0 125 189.864" xml:space="preserve">
		<path class="flame-main" fill="#002C56" d="M76.553,186.09c0,0-10.178-2.976-15.325-8.226s-9.278-16.82-9.278-16.82s-0.241-6.647-4.136-18.465
			c0,0,3.357,4.969,5.103,9.938c0,0-5.305-21.086,1.712-30.418c7.017-9.333,0.571-35.654-2.25-37.534c0,0,13.07,5.64,19.875,47.54
			c6.806,41.899,16.831,45.301,6.088,53.985"/>
		<path class="flame-main one" fill="#004F7D" d="M61.693,122.257c4.117-15.4,12.097-14.487-11.589-60.872c0,0,32.016,10.223,52.601,63.123
			c20.585,52.899-19.848,61.045-19.643,61.582c0.206,0.537-19.401-0.269-14.835-18.532S57.576,137.656,61.693,122.257z"/>
		<path class="flame-main two" fill="#C2E1F6" d="M81.657,79.192c0,0,11.549,24.845,3.626,40.02c-7.924,15.175-21.126,41.899-0.425,64.998
			C84.858,184.21,125.705,150.905,81.657,79.192z"/>
		<path class="flame-main three" fill="#8EC8FF" d="M99.92,101.754c0,0-23.208,47.027-12.043,80.072c0,0,32.741-16.073,20.108-45.79
			C95.354,106.319,99.92,114.108,99.92,101.754z"/>
		<path class="flame-main four" fill="#3175A7" d="M103.143,105.917c0,0,8.927,30.753-1.043,46.868c-9.969,16.115-14.799,29.041-14.799,29.041
			S134.387,164.603,103.143,105.917z"/>
		<path class="flame-main five" fill="#619DD2" d="M62.049,104.171c0,0-15.645,67.588,10.529,77.655C98.753,191.894,69.033,130.761,62.049,104.171z"/>
		<path class="flame" fill="#8EC8FF" d="M101.011,112.926c0,0,8.973,10.519,4.556,16.543C99.37,129.735,106.752,117.406,101.011,112.926z"/>
		<path class="flame one" fill="#7AB5EB" d="M55.592,126.854c0,0-3.819,13.29,2.699,16.945C64.038,141.48,55.907,132.263,55.592,126.854z"/>
		<path class="flame two" fill="#8EC8FF" d="M54.918,104.595c0,0-3.959,6.109-1.24,8.949C56.93,113.256,52.228,107.329,54.918,104.595z"/>
		</svg>
	</div>
	<!-- 修改说明 -->
	<div>
		<ul>
		<li>修改了svg组合图形中单个“<path>”的颜色</li>
		<li>添加了animation-delay与animation-delay使其变为动态</li>
		<li>添加了animation-iteration-count，使蓝色火焰上漂</li>
		<li>使用opacity: 0使上漂的小火焰透明度变化</li>
		</ul>
	</div>
</body>
</html>